<template>
  <!-- 按钮组件右侧操作列 -->
  <div class="actionButton">
    <!-- 标题 -->
    <h2>按钮设置</h2>
    
    <!-- 表单 -->
    <el-form
      label-position="top"
      label-width="80px"
      :model="datas"
      :rules="rules"
      size="small"
    >
      <!-- 基础信息 -->
      <el-form-item label="按钮文本" :hide-required-asterisk="true" prop="buttonText">
        <el-input
          v-model="datas.buttonText"
          placeholder="请输入按钮文本"
          maxlength="25"
          show-word-limit
        />
      </el-form-item>
      
      <!-- 文本样式 -->
      <el-form-item label="字体大小" :hide-required-asterisk="true" prop="fontSize">
        <el-input-number
          v-model="datas.fontSize"
          :min="12"
          :max="36"
          :step="1"
          placeholder="文本字号"
        />
        <span style="margin-left: 10px; font-size: 12px; color: #909399;">px</span>
      </el-form-item>
      
      <el-form-item label="字体颜色" :hide-required-asterisk="true" prop="textColor">
        <el-color-picker
          v-model="datas.textColor"
          show-alpha
          class="picke"
          :predefine="predefineColors"
        />
      </el-form-item>
      
      <el-form-item label="字体粗细" :hide-required-asterisk="true" prop="fontWeight">
        <el-select v-model="datas.fontWeight" placeholder="请选择字体粗细">
          <el-option label="正常" value="normal"></el-option>
          <el-option label="粗体" value="bold"></el-option>
          <el-option label="较细" value="lighter"></el-option>
          <el-option label="100" value="100"></el-option>
          <el-option label="300" value="300"></el-option>
          <el-option label="500" value="500"></el-option>
          <el-option label="700" value="700"></el-option>
          <el-option label="900" value="900"></el-option>
        </el-select>
      </el-form-item>
      
      <!-- 按钮样式 -->
      <el-form-item label="按钮类型" :hide-required-asterisk="true" prop="buttonType">
        <el-radio-group v-model="datas.buttonType">
          <el-radio-button label="default">默认</el-radio-button>
          <el-radio-button label="primary">主要</el-radio-button>
          <el-radio-button label="success">成功</el-radio-button>
          <el-radio-button label="warning">警告</el-radio-button>
          <el-radio-button label="danger">危险</el-radio-button>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="按钮尺寸" :hide-required-asterisk="true" prop="buttonSize">
        <el-select v-model="datas.buttonSize" placeholder="请选择按钮尺寸">
          <el-option label="小型" value="small"></el-option>
          <el-option label="中型" value="medium"></el-option>
          <el-option label="大型" value="large"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="自定义背景色" :hide-required-asterisk="true" prop="bgColor">
        <el-color-picker
          v-model="datas.bgColor"
          show-alpha
          class="picke"
          :predefine="predefineColors"
        />
      </el-form-item>
      
      <el-form-item label="圆角大小" :hide-required-asterisk="true" prop="borderRadius">
        <el-input-number
          v-model="datas.borderRadius"
          :min="0"
          :max="50"
          :step="1"
          placeholder="圆角大小"
        />
        <span style="margin-left: 10px; font-size: 12px; color: #909399;">px</span>
      </el-form-item>
      
      <el-form-item label="边框设置" :hide-required-asterisk="true" class="lef">
        <el-input-number
          v-model="datas.borderWidth"
          :min="0"
          :max="10"
          :step="1"
          placeholder="边框宽度"
          style="width: 120px;"
        />
        <span style="margin-left: 5px; margin-right: 10px; font-size: 12px; color: #909399;">px</span>
        
        <el-color-picker
          v-model="datas.borderColor"
          show-alpha
          class="picke"
          :predefine="predefineColors"
          style="width: 150px;"
        />
      </el-form-item>
      
      <!-- 按钮行为 -->
      <el-form-item label="点击行为" :hide-required-asterisk="true" prop="actionType">
        <el-select v-model="datas.actionType" placeholder="请选择点击行为">
          <el-option label="跳转链接" value="link"></el-option>
          <el-option label="弹窗" value="modal"></el-option>
          <el-option label="提交表单" value="submit"></el-option>
          <el-option label="自定义事件" value="event"></el-option>
          <el-option label="无操作" value="none"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item 
        v-if="datas.actionType === 'link'" 
        label="跳转链接" 
        :hide-required-asterisk="true" 
        prop="linkUrl"
      >
        <el-input
          v-model="datas.linkUrl"
          placeholder="请输入跳转链接"
        />
      </el-form-item>
      
      <el-form-item 
        v-if="datas.actionType === 'link'" 
        label="打开方式" 
        :hide-required-asterisk="true" 
        prop="target"
      >
        <el-radio-group v-model="datas.target">
          <el-radio-button label="_self">当前窗口</el-radio-button>
          <el-radio-button label="_blank">新窗口</el-radio-button>
        </el-radio-group>
      </el-form-item>
      
      <!-- 显示设置 -->
      <el-form-item label="显示图标" :hide-required-asterisk="true" prop="showIcon">
        <el-switch v-model="datas.showIcon"></el-switch>
      </el-form-item>
      
      <el-form-item 
        v-if="datas.showIcon" 
        label="图标名称" 
        :hide-required-asterisk="true" 
        prop="iconName"
      >
        <el-input
          v-model="datas.iconName"
          placeholder="请输入Element UI图标名称，如el-icon-edit"
        />
      </el-form-item>
      
      <el-form-item 
        v-if="datas.showIcon" 
        label="图标位置" 
        :hide-required-asterisk="true" 
        prop="iconPosition"
      >
        <el-select v-model="datas.iconPosition" placeholder="请选择图标位置">
          <el-option label="左侧" value="left"></el-option>
          <el-option label="右侧" value="right"></el-option>
        </el-select>
      </el-form-item>
      
      <!-- 高级设置 -->
      <el-form-item label="禁用状态" :hide-required-asterisk="true" prop="disabled">
        <el-switch v-model="datas.disabled"></el-switch>
      </el-form-item>
      
      <el-form-item label="加载状态" :hide-required-asterisk="true" prop="loading">
        <el-switch v-model="datas.loading"></el-switch>
      </el-form-item>
      
      <el-form-item label="块级展示" :hide-required-asterisk="true" prop="block">
        <el-switch v-model="datas.block"></el-switch>
      </el-form-item>
    </el-form>
    
    <!-- 预览区域 -->
    <div class="preview-section">
      <h3 style="font-size: 14px; margin-bottom: 10px; color: #303133;">按钮预览</h3>
      <div class="preview-container" :style="previewStyle">
        <el-button
          :type="datas.buttonType"
          :size="datas.buttonSize"
          :disabled="datas.disabled"
          :loading="datas.loading"
          :block="datas.block"
          :icon="datas.showIcon ? datas.iconName : ''"
          :style="buttonPreviewStyle"
        >
          {{ datas.buttonText || '预览按钮' }}
        </el-button>
      </div>
    </div>
    
    <!-- 上传背景图片 -->
    <div class="upload-section">
      <h3 style="font-size: 14px; margin-bottom: 10px; color: #303133;">背景图片（可选）</h3>
      <uploadimg ref="upload" @uploadInformation="uploadInformation" />
      <div v-if="datas.bgImg" style="margin-top: 10px; text-align: center;">
        <img :src="datas.bgImg" style="max-width: 100%; max-height: 100px;" alt="按钮背景" />
        <el-button type="danger" size="mini" @click="clearBgImg" style="margin-top: 5px;">清除图片</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import uploadimg from "../../uploadImg"; //图片上传

export default {
  name: "actionButton",
  props: {
    datas: {
      type: Object,
      default: () => ({
        buttonText: '按钮',
        fontSize: 14,
        textColor: '#ffffff',
        fontWeight: 'normal',
        buttonType: 'primary',
        buttonSize: 'medium',
        bgColor: '#409EFF',
        borderRadius: 4,
        borderWidth: 0,
        borderColor: '#dcdfe6',
        actionType: 'none',
        linkUrl: '',
        target: '_self',
        showIcon: false,
        iconName: '',
        iconPosition: 'left',
        disabled: false,
        loading: false,
        block: false,
        bgImg: ''
      })
    },
  },
  data() {
    return {
      rules: {
        //校验表单输入
        buttonText: [
          { required: true, message: "请输入按钮文本", trigger: "blur" },
        ],
      },
      predefineColors: [
        // 颜色选择器预设
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "#409EFF",
        "#909399",
        "#C0C4CC",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
        "#ffffff",
        "#000000",
        "#f56c6c",
        "#67c23a",
        "#e6a23c",
      ],
    };
  },
  
  computed: {
    // 按钮预览样式
    buttonPreviewStyle() {
      return {
        fontSize: `${this.datas.fontSize}px`,
        color: this.datas.textColor,
        fontWeight: this.datas.fontWeight,
        backgroundColor: this.datas.bgColor && !this.datas.bgImg ? this.datas.bgColor : undefined,
        borderRadius: `${this.datas.borderRadius}px`,
        borderWidth: `${this.datas.borderWidth}px`,
        borderColor: this.datas.borderColor,
        backgroundImage: this.datas.bgImg ? `url(${this.datas.bgImg})` : undefined,
        backgroundSize: 'cover',
        backgroundPosition: 'center'
      }
    },
    
    // 预览容器样式
    previewStyle() {
      return {
        padding: '20px',
        backgroundColor: '#f5f7fa',
        borderRadius: '4px',
        textAlign: this.datas.block ? 'stretch' : 'center'
      }
    }
  },
  
  created() {
    // 初始化数据，确保所有必要的字段都存在
    this.initDefaultData()
  },
  
  methods: {
    // 初始化默认数据
    initDefaultData() {
      const defaultData = {
        buttonText: '按钮',
        fontSize: 14,
        textColor: '#ffffff',
        fontWeight: 'normal',
        buttonType: 'primary',
        buttonSize: 'medium',
        bgColor: '#409EFF',
        borderRadius: 4,
        borderWidth: 0,
        borderColor: '#dcdfe6',
        actionType: 'none',
        linkUrl: '',
        target: '_self',
        showIcon: false,
        iconName: '',
        iconPosition: 'left',
        disabled: false,
        loading: false,
        block: false,
        bgImg: ''
      }
      
      // 合并默认数据和传入的数据
      for (const key in defaultData) {
        if (this.datas[key] === undefined) {
          this.$set(this.datas, key, defaultData[key])
        }
      }
    },
    
    // 上传图片
    uploadInformation(res) {
      this.$set(this.datas, 'bgImg', res)
      // 当设置了背景图片时，清除背景色，避免覆盖
      if (res && this.datas.bgColor) {
        this.$set(this.datas, 'bgColor', '')
      }
    },
    
    // 清空背景图片
    clearBgImg() {
      this.$set(this.datas, 'bgImg', '')
      // 当清除背景图片时，恢复默认背景色
      if (!this.datas.bgColor) {
        const defaultColors = {
          'primary': '#409EFF',
          'success': '#67c23a',
          'warning': '#e6a23c',
          'danger': '#f56c6c',
          'info': '#909399',
          'default': '#ffffff'
        }
        this.$set(this.datas, 'bgColor', defaultColors[this.datas.buttonType] || '#409EFF')
        
        // 如果是默认按钮，恢复默认文字颜色
        if (this.datas.buttonType === 'default') {
          this.$set(this.datas, 'textColor', '#606266')
        } else {
          this.$set(this.datas, 'textColor', '#ffffff')
        }
      }
    },
  },
  
  watch: {
    // 根据按钮类型更新默认颜色
    'datas.buttonType': {
      handler(newType) {
        // 只有在没有自定义背景图片和颜色的情况下才更新
        if (!this.datas.bgImg && !this.datas.bgColor) {
          const defaultColors = {
            'primary': { bg: '#409EFF', text: '#ffffff' },
            'success': { bg: '#67c23a', text: '#ffffff' },
            'warning': { bg: '#e6a23c', text: '#ffffff' },
            'danger': { bg: '#f56c6c', text: '#ffffff' },
            'info': { bg: '#909399', text: '#ffffff' },
            'default': { bg: '#ffffff', text: '#606266' }
          }
          
          const colors = defaultColors[newType] || defaultColors.primary
          this.$set(this.datas, 'bgColor', colors.bg)
          this.$set(this.datas, 'textColor', colors.text)
        }
      }
    },
  },
  
  components: { 
    uploadimg 
  },
};
</script>

<style scoped lang="scss">
/* 按钮组件右侧操作列样式 */
.actionButton {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  
  h2 {
    padding: 20px 0 16px 0;
    margin: 0 0 16px 0;
    border-bottom: 1px solid #ebeef5;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }
  
  /* 颜色选择器 */
  .picke {
    margin-left: 0;
    width: 100%;
  }
  
  // 表单样式优化
  .el-form {
    margin-bottom: 20px;
    
    .el-form-item {
      margin-bottom: 20px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .el-form-item__label {
        padding: 0 0 10px 0;
        color: #606266;
        font-weight: 400;
      }
    }
  }
  
  // 水平布局表单项
  .lef {
    display: flex;
    align-items: center;
    
    ::v-deep.el-form-item__label {
      text-align: left;
      margin-right: 10px;
      padding-bottom: 0;
      width: auto;
      flex-shrink: 0;
    }
    
    ::v-deep.el-form-item__content {
      flex: 1;
      margin-left: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      
      .el-input-number {
        flex: 1;
      }
      
      .picke {
        flex: 2;
      }
    }
  }
  
  // 预览区域样式
  .preview-section {
    margin-bottom: 24px;
    
    .preview-container {
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .el-button {
        transition: all 0.3s ease;
      }
      
      .el-button.is-block {
        width: 100%;
      }
    }
  }
  
  // 上传区域样式
  .upload-section {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  // 按钮组样式优化
  .el-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    
    .el-radio-button {
      margin-right: 0;
    }
  }
  
  // 输入框和选择器样式优化
  .el-input,
  .el-select {
    width: 100%;
  }
  
  // 数字输入框样式优化
  .el-input-number {
    width: 100%;
    
    .el-input__inner {
      text-align: left;
    }
  }
  
  // 切换开关样式优化
  .el-switch {
    margin-top: 5px;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .actionButton {
    padding: 0 12px;
    
    .lef {
      ::v-deep.el-form-item__content {
        flex-direction: column;
        align-items: stretch;
        
        .el-input-number,
        .picke {
          width: 100%;
          flex: none;
        }
      }
    }
    
    .el-radio-group {
      flex-direction: column;
      
      .el-radio-button {
        display: block;
        margin-bottom: 8px;
      }
    }
  }
}

// 动画效果
.preview-container .el-button {
  transition: transform 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
  }
}
</style>